<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:body>
        <ui:composition>
            <!-- Right column -->
            <div class="floatRight width73">

                <h1>Contact <span class="dark">Us</span></h1>

                <p>
                    Nulla commodo. In nunc justo, mollis sed, gravida at, aliquam sit amet, urna. Nulla commodo. In pharetra justo eget turpis. Nulla commodo. In pharetra justo eget turpis.  In nunc justo, mollis sed, gravida at, <h:outputLink value="">aliquam sit</h:outputLink> amet, urna.
                </p>

                <h:form id="contact" onsubmit="return configForm(this);" style="position: relative; z-index: 1;">
                    <p>
                        <h:inputText id="name" value="Name" styleClass="width75" onfocus="clearValue(this, 'Name');" onblur="fillValue(this, 'Name');"/>
                    </p>

                    <p>
                        <h:inputText id="email" value="E-mail" styleClass="width75" onfocus="clearValue(this, 'E-mail');" onblur="fillValue(this, 'E-mail');"/>
                    </p>

                    <p>
                        <h:inputText id="subject" value="Subject" styleClass="width75" onfocus="clearValue(this, 'Subject');" onblur="fillValue(this, 'Subject');"/>
                    </p>

                    <p>
                        <h:inputTextarea id="message" rows="5" cols="80" onfocus="clearValue(this, 'Message');" onblur="fillValue(this, 'Message');">Message</h:inputTextarea>
                    </p>

                    <p>
                        <h:commandButton type="submit" value="SEND" styleClass="button" />
                        <h:commandButton type="reset" value="RESET" styleClass="button" />
                    </p>

                    <p>&nbsp;

                    </p>



                    <h1>Example Form <span class="dark">Elements</span></h1>



                    <p>
                        <label>Input Heading</label>
                        <h:inputText id="input1" styleClass="width50"/>
                    </p>

                    <p>
                        <label>Input Heading</label>
                        <h:inputText id="input2" styleClass="width50"/>
                    </p>

                    <p>
                        <label>Textarea Heading</label>
                        <h:inputTextarea id="textarea" rows="5" cols="60"></h:inputTextarea>
                    </p>

                    <p>
                        <label>Select Heading</label>
                        <h:selectOneMenu id="select">
                            <f:selectItem itemLabel="Value One" itemValue="1"/>
                            <f:selectItem itemLabel="Value Two" itemValue="2"/>
                        </h:selectOneMenu>
                    </p>

                    <p>
                        <label>Radio Button Group</label>
                        <h:selectOneRadio id="radio" styleClass="radio">
                            <f:selectItem itemLabel="One" itemValue="1"/>
                            <f:selectItem itemLabel="Two" itemValue="2"/>
                            <f:selectItem itemLabel="Three" itemValue="3"/>
                            <f:selectItem itemLabel="Four" itemValue="4"/>
                        </h:selectOneRadio>
                    </p>

                    <p>
                        <label>Checkbox Group</label>
                        <h:selectManyCheckbox id="checkbox1" styleClass="radio">
                            <f:selectItem itemLabel="One" itemValue="1"/>
                            <f:selectItem itemLabel="Two" itemValue="2"/>
                            <f:selectItem itemLabel="Three" itemValue="3"/>
                            <f:selectItem itemLabel="Four" itemValue="4"/>
                        </h:selectManyCheckbox>
                    </p>


                    <div class="lightBlueBg">

                        <h2>Different Style Checkbox Group</h2>
                        <p>
                            <h:selectManyCheckbox id="checkGroup" styleClass="radio" layout="pageDirection">
                                <f:selectItem itemLabel=" A Choice" itemValue="1"/>
                                <f:selectItem itemLabel=" Another Choice" itemValue="2"/>
                                <f:selectItem itemLabel=" Maybe this is a better choice" itemValue="3"/>
                                <f:selectItem itemLabel=" Other " itemValue="4"/>
                            </h:selectManyCheckbox>
                            <h:inputText id="other" styleClass="width33"/>
                        </p>

                    </div>

                </h:form>
            </div>
            <!-- Right column end -->

        </ui:composition>
    </h:body>
</html>

